import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';

import { SafeAreaView } from 'react-navigation';
import BaseStyle from '../constants/Style';

import { Button, DatePicker } from 'antd-mobile-rn';
import { tools } from '../utils/tools';

export default class RadioScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: undefined,
      visible: false,
      buttonText: "请选择日期"
    };
  }
  onChange = (value) => {
   console.log(value)
   this.setState({ value:value, buttonText:(value)});
  }
  render() {
    return (
      <SafeAreaView
        style={[BaseStyle.flex, styles.homebg]}
        forceInset={{ top: 'never' }}>
        <View style={styles.container}>
          <Button
            type={'primary'}
            activeStyle={false}
            onClick={() => {
              this.setState({
                visible: true
              })
            }}
          >
            {tools.formatDate(this.state.buttonText)}
          </Button>
          <DatePicker
            value={this.state.value}
            mode="date"
            minDate={new Date(2015, 7, 6)}
            maxDate={new Date(2026, 11, 3)}
            onChange={(v) => { this.onChange(v) }}
            format="YYYY-MM-DD"
            title={'请选择时间'}
            visible={this.state.visible}
            onOk={date => this.setState({ buttonText:date  , value: date, visible: false })}
            onDismiss={() => this.setState({ visible: false })}
        
          >

          </DatePicker>

        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  homebg: {
    backgroundColor: '#eee',
  },
  container: {
    ...BaseStyle.flex,

  },
  radView: {
    marginTop: 20,
  },
});
